<template>
	<view class="container">
		<view class="border-body" v-if="mobile!=''">
			<view class="body_pos_re">
				<text class="body_pos_tit">真实姓名</text>
				<u--input border="none" class="body_phone_input" placeholder="请输入您的真实姓名" placeholderClass="placeholder"
					type="text" fontSize="26rpx" clearable v-model="realname"></u--input>
			</view>
			<view class="body_pos_re">
				<text class="body_pos_tit">开户银行</text>
				<u--input border="none" class="body_phone_input" placeholder="请输入您的开户银行" placeholderClass="placeholder"
					type="text" fontSize="26rpx" clearable v-model="bank_name"></u--input>
			</view>
			<view class="body_pos_re">
				<text class="body_pos_tit">银行卡号</text>
				<u--input border="none" class="body_phone_input" placeholder="请输入您的银行卡号" placeholderClass="placeholder"
					type="text" fontSize="26rpx" clearable v-model="bank_card"></u--input>
			</view>
			<view class="body_pos_re" v-if="user_info_sms_enable=='1'">
				<text class="body_pos_tit">验证码</text>
				<u--input border="none" class="body_phone_input" placeholder="请输入您的验证码" placeholderClass="placeholder"
					type="number" maxlength="6" fontSize="26rpx" clearable v-model="code"></u--input>
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<u-code ref="uCode1" :seconds="sms_time_out" @change="codeChange" keep-running change-text="倒计时XS"
							@start="disabled = true" @end="disabled = false"></u-code>
						<u-button @tap="getCode" :text="tips" size="small" :disabled="disabled" class="body_btn">
						</u-button>
					</view>
				</view>
			</view>
		</view>
		<button class="body_btn2" @click="confirm"  v-if="mobile!=''">确认</button>
	</view>
</template>

<script>
	import md5 from '@/components/MD5.js'
	var validate = require("@/components/validate/validate.js");
	var _this;
	export default {
		data() {
			return {
				step: 1,
				realname: '',
				zfb_skm: '',
				wx_skm: '',
				bank_name: '',
				bank_card: '',
				user_info_sms_enable: '0',
				sms_time_out:60,
				tips: '',
				disabled: false,
				//手机号
				mobile: '',
				//验证码
				code: ''
			}
		},
		onLoad() {
			_this = this;
		},
		onShow() {
			this.step = 1
			this.save_user_info()
		},
		methods: {
			//获取验证码
			codeChange(text) {
				this.tips = text;
			},
			confirm() {
				this.step = 2
				this.save_user_info()
			},
			async getCode() {
				if (this.$refs.uCode1.canGetCode) {
					const params = {
						mobile: this.mobile,
						scene: 1
					}
					const data = await _this.$post('api/GetCode',params)
					if(data.code==200){
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast(data.msg);
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode1.start();
					}else{
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast(data.msg);
					}
				} else {
					uni.$u.toast('请倒计时结束后再发送');
				}
			},
			//图片上传
			uploadFilePromise(type) {
				if(type==1){
					var path='zfb_skm'
				}else{
					var path='wx_skm'
				}
				let _this=this;
				let sign=md5.hax_md5('path'+path+'user_id'+this.user_id+"buxiuqiji" + this.user_token + "buxiuqiji").toLocaleLowerCase()
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						uni.uploadFile({
							url: getApp().globalData.api_url+'/api/UploadPic', // 仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							header:{
								token:_this.user_token
							},
							formData: {
								user_id: _this.user_id,
								path: path,
								sign: sign
							},
							success: (result) => {
								let data=JSON.parse(result.data)
								if(data.code==200){
									_this[path]=data.img
								}else{
									uni.$u.toast(data.msg)
								}
							}
						});
					}
				});
			},
			//更新个人信息
			async save_user_info() {
				const params = {
					step: this.step,
					realname: this.realname,
					bank_name: this.bank_name,
					bank_card: this.bank_card,
					code: this.code
				}
				if (this.step == 2) {
					let codeRule = {
						// 字段名
						name: 'code',
						rules: ['require', 'integer', 'min:6'],
						errorMsg: {
							require: '验证码不能为空',
							integer: '验证码只能为数字',
							min: '验证码为6位'
						}
					}
					var rule = [{
						// 字段名
						name: 'realname',
						rules: ['require', 'chn'],
						errorMsg: {
							require: '真实姓名不能为空',
							chn: '真实姓名只能为中文',
						}
					},  {
						// 字段名
						name: 'bank_name',
						rules: ['require', 'chn'],
						errorMsg: {
							require: '开户银行不能为空',
							chn: '开户银行只能为中文',
						}
					}, {
						// 字段名
						name: 'bank_card',
						rules: ['require'],
						errorMsg: {
							require: '银行卡号不能为空',
						}
					}];
					if(this.user_info_sms_enable=='1'){
						rule.splice(3,0,codeRule);
					}
					// 是否全部通过，返回Boolean
					let checked = validate.check(params, rule);
					if (!checked) {
						// 获取错误信息
						let err = validate.getError();
						uni.$u.toast(err[0])
						return;
					}
				}
				const data = await _this.$post('api/EditUserInfo',params)
				if (data.code == 200) {
					this.$u.toast(data.msg)
					setTimeout(res=>{
						this.$u.route({
							url: "pages/center/center",
							type: "switchTab"
						})
					},2000)
				} else if (data.code == 10) {
					this.mobile = data.data.mobile
					this.realname = data.data.realname
					this.bank_name = data.data.bank_name
					this.bank_card = data.data.bank_card
					this.user_info_sms_enable = data.data.user_info_sms_enable
				} else {
					this.$u.toast(data.msg)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 20rpx 0 20rpx;

		.border-body {
			border-radius: 20rpx;
			background: #FFFFFF;
			box-shadow: $global-shade;
			padding: 0 20rpx;
			margin-bottom: 20rpx;

			.body_pos_re {
				min-height: 90rpx;
				display: flex;
				align-items: center;

				&:not(:last-child) {
					border-bottom: 1px solid #F6F7FB;
				}

				.body_pos_tit {
					width: 20%;
				}

				.body_phone_input {
					flex: 1;
				}

				.u-demo-block {
					width: 26%;

					.body_btn {
						font-size: 26rpx;
						border-radius: 10px;
						color: $theme-color;
						height: 46rpx;
						border: none;
						background-color: $uni-bg-color;
					}
				}
			}
			.upload-row{
				padding: 20rpx 0;
				text-align: center;
				.upload-row-img{
					width: 200rpx;
					height: 200rpx;
				}
				.upload-row-tit{
					margin-top: 10rpx;
				}
			}
		}

		.body_btn2 {
			width: 90%;
			height: 80rpx;
			font-size: 28rpx;
			border-radius: 20px;
			margin-top: 25rpx;
			color: #fff;
			background-color: $theme-color;
			line-height: 81rpx;
		}
	}

	.placeholder {
		font-size: 24rpx;
		color: #ADADAD;
	}
</style>
